import React from 'react'
import { Modal, Form, Input } from 'antd'
import { LwjArea }  from 'components';

const FormItem = Form.Item

const DistributorFormModal = ({
  onOk, item, onCancel,loading, form: {
    getFieldDecorator,
    validateFields,
  }, ...modalProps
}) => {
  const formItemLayout = {
    labelCol: {
      xs: { span: 8, offset: 0 },
      sm: { span: 8, offset: 0 },
    },
    wrapperCol: {
      xs: { span: 12, offset: 0 },
      sm: { span: 12, offset: 0 },
    },
  }
  const onSubmit = (e) => {
    e.preventDefault()
    validateFields((err, values) => {
      if (!err) {
        const region = values.region;
        let city;
        let province;
        let district;
        if (_.isArray(region)) {
          region.forEach((value, key) => {
            if (key === 0)
              province = value
            if (key === 1)
              city = value
            if (key === 2)
              district = value
          })
        }
        values.city = city;
        values.province = province;
        values.district = district;
        delete values.region;
        onOk(item.id, values)
      }
    })
  }

  const modalOpts = {
    ...modalProps,
    onOk: onSubmit,
  }
  const buildRegion = (item) => {
    const city = item.city
    const province = item.province
    const district = item.district
    return [province, city, district]
  }
  return (
    <Modal destroyOnClose={true} {...modalOpts} onCancel={() => { onCancel(false) }} confirmLoading={loading}>
      <Form layout="horizontal">
        <FormItem {...formItemLayout} label="门店地址">
          {getFieldDecorator('region', {
            rules: [
              {
                required: true,
                message: '请输入门店地址',
                type: 'array'
              }
            ],
            initialValue: !_.isEmpty(item) && buildRegion(item)
          })(
            < LwjArea width={'100%'} />
          )}
        </FormItem>
        <FormItem {...formItemLayout} hasFeedback label="详细地址">
          {getFieldDecorator('address', {
            rules: [{ required: true, message: '门店地址必须填写!' }],
            initialValue: item.address,
          })(<Input />)}
        </FormItem>
      </Form>
    </Modal>
  )
}

export default Form.create()(DistributorFormModal)
